{% extends "base.html" %}

{% block title %}{% if room %}编辑宾馆{% else %}添加宾馆{% endif %} - 风之宿{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold text-primary mb-8">
    {% if room %}编辑宾馆{% else %}添加宾馆{% endif %}
  </h1>

  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow-md p-6">
      <form method="POST" enctype="multipart/form-data" class="space-y-6">
    {% csrf_token %}
        <!-- 基本信息 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">宾馆名称 *</label>
            <input type="text" id="name" name="name" required
                   value="{% if room %}{{ room.name }}{% else %}{% endif %}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                   placeholder="请输入宾馆名称">
          </div>

          <div>
            <label for="room_type" class="block text-sm font-medium text-gray-700 mb-2">宾馆分类</label>
            <select id="room_type" name="room_type"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
              <option value="standard" {% if room and room.room_type == 'standard' %}selected{% endif %}>标准房</option>
              <option value="deluxe" {% if room and room.room_type == 'deluxe' %}selected{% endif %}>豪华房</option>
              <option value="suite" {% if room and room.room_type == 'suite' %}selected{% endif %}>套房</option>
              <option value="villa" {% if room and room.room_type == 'villa' %}selected{% endif %}>别墅</option>
              <option value="family" {% if room and room.room_type == 'family' %}selected{% endif %}>家庭房</option>
              <option value="game" {% if room and room.room_type == 'game' %}selected{% endif %}>电竞房</option>
            </select>
          </div>
        </div>

        <div>
          <label for="description" class="block text-sm font-medium text-gray-700 mb-2">宾馆描述 *</label>
          <textarea id="description" name="description" rows="4" required
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                    placeholder="请输入宾馆的详细描述，包括特色、布局等信息">{% if room %}{{ room.description }}{% else %}{% endif %}</textarea>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <label for="price" class="block text-sm font-medium text-gray-700 mb-2">价格 (元/晚) *</label>
            <input type="number" id="price" name="price" step="0.01" min="0" required
                   value="{% if room %}{{ room.price }}{% else %}{% endif %}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                   placeholder="0.00">
          </div>

          <div>
            <label for="capacity" class="block text-sm font-medium text-gray-700 mb-2">容纳人数 *</label>
            <input type="number" id="capacity" name="capacity" min="1" max="20" required
                   value="{% if room %}{{ room.capacity }}{% else %}2{% endif %}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                   placeholder="2">
          </div>

          <div>
            <label for="size" class="block text-sm font-medium text-gray-700 mb-2">宾馆面积 (㎡)</label>
            <input type="number" id="size" name="size" step="0.1" min="0"
                   value="{% if room %}{{ room.size }}{% else %}{% endif %}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary"
                   placeholder="例如：35.5">
          </div>
        </div>

        <!-- 图片管理 -->
        <div class="border-t border-gray-200 pt-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">宾馆图片</h3>

          <!-- 当前图片显示 -->
          {% if room and room.image_url %}
          <div class="mb-6">
            <p class="text-sm font-medium text-gray-700 mb-2">当前宾馆图片:</p>
            <div class="flex flex-col md:flex-row md:items-start space-y-4 md:space-y-0 md:space-x-6">
              <div class="flex-shrink-0">
                <img src="{% static 'uploads/' %}{{ room.image_url }}" alt="{{ room.name }}" class="h-48 w-auto object-cover rounded-lg shadow-sm">
              </div>
              <div class="flex flex-col space-y-2">
                <a href="{% static 'uploads/' %}{{ room.image_url }}" target="_blank" class="text-sm text-primary hover:underline flex items-center">
                  <i class="fas fa-external-link-alt mr-1"></i>查看原图
                </a>
                <div class="flex items-center space-x-2">
                  <input type="checkbox" id="delete_image" name="delete_image"
                         class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                  <label for="delete_image" class="text-sm text-red-600">删除当前图片</label>
                </div>
                <p class="text-xs text-gray-500 mt-2">上传新图片将自动替换当前图片</p>
              </div>
            </div>
          </div>
          {% endif %}

          <!-- 图片上传 -->
          <div class="mb-4">
            <label for="image" class="block text-sm font-medium text-gray-700 mb-2">
              {% if room and room.image_url %}更换宾馆图片{% else %}上传宾馆图片{% endif %}
            </label>
            <div class="flex items-center justify-center w-full">
              <label for="image" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors">
                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                  <i class="fas fa-cloud-upload-alt text-gray-400 text-2xl mb-2"></i>
                  <p class="mb-1 text-sm text-gray-500">
                    <span class="font-semibold">点击上传</span> 或拖拽文件到这里
                  </p>
                  <p class="text-xs text-gray-500">PNG, JPG, GIF, WebP (最大 5MB)</p>
                </div>
                <input id="image" name="image" type="file" class="hidden" accept="image/*">
              </label>
            </div>
          </div>

          <!-- 图片预览 -->
          <div id="image-preview" class="mt-4 hidden">
            <p class="text-sm font-medium text-gray-700 mb-2">图片预览:</p>
            <div class="flex space-x-4">
              <img id="preview" class="h-48 w-auto object-cover rounded-lg shadow-sm">
              <div class="flex flex-col justify-center text-sm text-gray-500">
                <p>图片将显示在宾馆详情页面</p>
                <p class="mt-1">建议尺寸: 800x600像素</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 宾馆状态和其他设置 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 border-t border-gray-200 pt-6">
          <div>
            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">宾馆状态</label>
            <select id="status" name="status"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
              <option value="available" {% if room and room.status == 'available' %}selected{% endif %}>可用</option>
              <option value="occupied" {% if room and room.status == 'occupied' %}selected{% endif %}>已占用</option>
              <option value="maintenance" {% if room and room.status == 'maintenance' %}selected{% endif %}>维护中</option>
              <option value="unavailable" {% if room and room.status == 'unavailable' %}selected{% endif %}>不可用</option>
            </select>
          </div>

          <div>
            <label for="featured" class="block text-sm font-medium text-gray-700 mb-2">推荐设置</label>
            <div class="flex items-center">
              <input type="checkbox" id="featured" name="featured" value="1"
                     class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
                     {% if room and room.featured %}checked{% endif %}>
              <label for="featured" class="ml-2 text-sm text-gray-700">设为推荐宾馆</label>
            </div>
            <p class="text-xs text-gray-500 mt-1">推荐宾馆将显示在首页特色房型区域</p>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-end space-x-4 pt-6 border-t border-gray-200">
          <a href="{% url 'hotel_admin:manage_rooms' %}" class="bg-gray-300 text-gray-700 px-6 py-2 rounded-md hover:bg-gray-400 transition-colors font-medium">
            取消
          </a>
          <button type="submit" class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-colors font-medium">
            {% if room %}更新宾馆信息{% else %}添加宾馆{% endif %}
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
// 图片预览功能
document.getElementById('image').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const preview = document.getElementById('preview');
  const previewContainer = document.getElementById('image-preview');

  if (file) {
    const reader = new FileReader();

    reader.onload = function(e) {
      preview.src = e.target.result;
      previewContainer.classList.remove('hidden');
    }

    reader.readAsDataURL(file);
  } else {
    previewContainer.classList.add('hidden');
  }
});

// 拖拽上传功能
const dropArea = document.querySelector('label[for="image"]');
const fileInput = document.getElementById('image');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false);
});

['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false);
});

function highlight() {
  dropArea.classList.add('border-primary', 'bg-blue-50');
}

function unhighlight() {
  dropArea.classList.remove('border-primary', 'bg-blue-50');
}

dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;
  fileInput.files = files;

  // 触发change事件以显示预览
  const event = new Event('change');
  fileInput.dispatchEvent(event);
}

// 表单验证
document.querySelector('form').addEventListener('submit', function(e) {
  const price = document.getElementById('price').value;
  const capacity = document.getElementById('capacity').value;

  if (price && parseFloat(price) <= 0) {
    e.preventDefault();
    alert('价格必须大于0');
    return false;
  }

  if (capacity && parseInt(capacity) <= 0) {
    e.preventDefault();
    alert('容纳人数必须大于0');
    return false;
  }

  return true;
});
</script>

<style>
/* 自定义拖拽区域样式 */
label[for="image"]:hover {
  border-color: #3b82f6;
  background-color: #f8fafc;
}
</style>
{% endblock %}
